<template>
  <div class="index">
    <van-nav-bar title="各科成绩" left-text="返回" left-arrow @click-left="onClickLeft" />
    <!-- 各个科目成绩 -->
    <div v-if="show"></div>
    <div v-for="scroe in scroeDate" :key="scroe.id" v-else-if="!show">
      <div class="scroe" @click="jump(scroe.id, scroe.subject_id, scroe.subject_name)">
        <span>{{ scroe.subject_name }}</span>
        <span>{{ scroe.scroe }} 分</span>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { NavBar, Toast } from 'vant'
export default {
  name: 'sroucIndex',
  data() {
    return {
      show: true,
      scroeDate: []
    }
  },
  methods: {
    // Toast('返回');
    onClickLeft() {
      this.$router.push('/index')
    },
    // 查看科目主要内容
    jump(id, subject_id, subject_name) {
      this.$router.push('/sroucxq')
      localStorage.setItem('showSorce_id', id)
      // localStorage.setItem('subject_id', subject_id)
      localStorage.setItem('subject_name', subject_name)
    }
  },
  created() {
    axios({
      method: 'post',
      url: this.baseURL + '/api/api/sroceIndex',
      data: {
        id_card: localStorage.getItem('id_card')
      }
    }).then((res) => {
      // console.log(res)
      if (res.data.code == 0) {
        Toast(res.data.msg)
      } else {
        this.show = false
        this.scroeDate = res.data
      }
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.index {
  background-image: url('../assets/tu2.jpg');
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
}
.scroe {
  margin: 0.5rem 1rem;
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  padding: 10px 5px;
  background-color: rgb(218, 218, 218);
  border-radius: 5px;
}
</style>
